<template>
  <div style="height:100%;">
        <navbar :title="$t('personal_apply')" :showBackButton=false :showLeftArrow=false></navbar>
        <div class="content" style="padding-bottom: 56px;">
            <van-tabs v-model="activeTab" @click="checkTab" style="min-width:55%" color=" #075ebb" title-active-color=" #075ebb" title-inactive-color="#999">
                <van-tab name="PENDING" :title="$t('status_pending_approval')+'('+numObj.pendingCount+')'"></van-tab>
                <van-tab name="HISTORY" :title="$t('status_approved')+'('+numObj.historyCount+')'"></van-tab>
            </van-tabs>
            <!-- 列表数据 -->
            <div style="height: calc(100% - 47px);" class="body-content" :class="{'height-100' : total === 0}">
                <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                    <van-list
                    v-model="isLoading"
                    :finished="finished"
                    :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                    loding-text="loading"
                    @load="getList"
                    style="padding-bottom: 56px;"
                    >
                        <div class="box2" v-bind:class="{'height100' : total === 0}">
                            <div v-for="(item, index) in dataList" :key="index" class="list-item">
                                <div class="item-text">
                                    <div class="base-info">
                                        <div class="name">{{ item.usrDisplayBil }}</div>
                                        <div class="user-group">{{ item.usgDisplayBil }}</div>
                                    </div>
                                    <div class="appovel-title">
                                        <i class="iconfont icon-w_book"></i>
                                        <span>{{ item.itmTitle }}</span>
                                    </div>
                                    <div class="appovel-title appovel-time">
                                        <i class="iconfont icon-w_time"></i>
                                        <span>
                                            {{ item.appCreateTimestamp }}
                                        </span>
                                    </div>
                                    <div class="appovel-title appovel-time">
                                        <i class="iconfont icon-shenpi" v-if="item.appStatus !== 'Pending'"></i>
                                        <span v-if="item.appStatus === 'Rejected'">{{ $t('approve_status_1')}}</span>
                                        <span v-if="item.appStatus === 'Admitted'">{{$t('group_approved')}}</span>
                                    </div>
                                </div>
                                <div class="button-box" v-if="activeTab==='PENDING'">
                                    <div class="pass-btn" @click="handleAllow(item.appId)">{{ $t('pass') }}</div>
                                    <div class="refuse-btn" @click="handleRefuse(item.appId)">{{ $t('approve_status_3') }}</div>
                                </div>
                            </div>
                            <!--暂无数据-->
                            <div v-if="!isLoading && total === 0" style="height:100%;">
                                <div class="box-table" style="width:100%;height:100%;">
                                    <div class="box-table-cell" style="text-align: center;">
                                        <div class="no-data">
                                            <img src="../../../../static/images/no-data.png" alt=""/>
                                            <p class="color999">{{ $t("no_data") }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <common-loading :isLoading="isLoading"></common-loading>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </div>
        </div>
        <!-- 底部导航 -->
        <admin-bottom-navigation :active=0></admin-bottom-navigation>
        <van-dialog
        v-model="comfirmModal"
        show-cancel-button
        :title="$t('sure_pass_approval')"
        :confirmButtonText="$t('sure')"
        :cancelButtonText="$t('cancel')"
        @confirm="handleAllowComfirm"
        >
        </van-dialog>
        <van-dialog
        v-model="refuseComfirmModal"
        show-cancel-button
        :title="$t('sure_refuse_approval')"
        :confirmButtonText="$t('sure')"
        :cancelButtonText="$t('cancel')"
        @confirm="handleRefuseComfirm"
        >
        </van-dialog>
  </div>
</template>

<script>
import { Tab, Tabs, Icon, Cascader, Popup } from 'vant';
import CommonLoading from '@/components/common/loading';
import AdminBottomNavigation from '@/components/adminComponent/adminBottomNavigation/AdminBottomNavigation';
export default {
    name: 'application',
    components: {
        AdminBottomNavigation,
        [Tab.name]: Tab,
        [Tabs.name]: Tabs,
        [Icon.name]: Icon,
        vanCascader: Cascader,
        vanPopup: Popup,
        CommonLoading
    },
    data() {
        return {
            dataList: [],
            pageData: {
                pageNo: 1,
                pageSize: 5,
                searchText: ''
            },
            total: 0,
            isLoading: false,
            activeTab: 'PENDING',
            isTop: false,
            numObj: {
                historyCount: 0,
                pendingCount: 0
            },
            comfirmModal: false,
            refuseComfirmModal: false,
            curAppId: null,
            finished: true,
            isRefresh: false,
            isHasCenter: true
        };
    },
    mounted() {
        this.checkHasTrainCenter();
    },
    methods: {
        checkHasTrainCenter() {
            this.$axios({
                method: 'GET',
                url: `/app/api/training-center/list`
            }).then((res) => {
                this.getNum();
                this.getList();
            }).catch(() => {
                this.isHasCenter = false;
                this.isLoading = false;
                this.$toast(this.$t('requestError.ERROR_NO_TRAININGCENTER_MANAGEMENT'));
            });
        },
        /*下拉刷新*/
        onPulldownTop() {
            if (!this.isHasCenter) {
                this.isRefresh = false;
                this.$toast(this.$t('requestError.ERROR_NO_TRAININGCENTER_MANAGEMENT'));
                return false;
            }
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageData.pageNo = 1;
                this.getList('refresh');
                this.isRefresh = false;
            }, 900);
        },
        checkTab() {
            if (!this.isHasCenter) {
                this.$toast(this.$t('requestError.ERROR_NO_TRAININGCENTER_MANAGEMENT'));
                return false;
            }
            this.pageData.pageNo = 1;
            this.getList('refresh');
        },
        getList(option) {
            if (!this.isHasCenter) {
                this.$toast(this.$t('requestError.ERROR_NO_TRAININGCENTER_MANAGEMENT'));
                return false;
            }
            this.isLoading = true;
            // 报名审批: 获取等待审批:PENDING  已审批: HISTORY
            this.$axios.post(`/app/api/trainee/my/ds-aproval-list/${this.activeTab}`, {}, { params: this.pageData }).then((res) => {
                if (res.data.results && res.data.results.length !== 0) {
                    if (option && option === 'refresh') {
                        this.dataList = res.data.results;
                    } else {
                        this.dataList = this.dataList.concat(res.data.results);
                    }
                } else {
                    if (option && option === 'refresh') {
                        this.dataList = res.data.results;
                    }
                }
                this.total = res.data.totalRecord;
                this.isLoading = false;
                this.pageData.pageNo++;
                if (this.dataList.length >= this.total) {
                    this.finished = true;
                } else {
                    this.finished = false;
                }
            }).catch(() => {
                this.isLoading = false;
                this.finished = true;
            });
        },
        getNum() {
            this.$axios.get(`/app/api/workbench/approval/count`).then((res) => {
                this.numObj = res.data;
            });
        },
        onSearch() {
            this.pageData.pageNo = 1;
            this.getNum();
            this.getList('refresh');
        },
        deleteSearch() {
            this.pageData.pageNo = 1;
            this.pageData.searchText = '';
            this.getNum();
            this.getList('refresh');
        },
        // 审批同意单行
        handleAllow(appId) {
            this.comfirmModal = true;
            this.curAppId = appId;
        },
        // 审批同意单行再次确认
        handleAllowComfirm() {
            const data = {
                actionId: 1,
                appIdList: [this.curAppId],
                content: ''
            };
            this.approvalApp(data);
        },
        // 不批准单行
        handleRefuse(appId) {
            this.refuseComfirmModal = true;
            this.curAppId = appId;
        },
        // 审批拒绝单行再次确认
        handleRefuseComfirm() {
            const data = {
                actionId: 2,
                appIdList: [this.curAppId],
                content: ''
            };
            this.approvalApp(data);
        },
        approvalApp(data) {
            this.$axios.post(`/app/api/trainee/my/approval`, data).then((res) => {
                this.pageData.pageNo = 1;
                this.getList('refresh');
                this.getNum();
                this.comfirmModal = false;
                this.refuseComfirmModal = false;
            });
        }
    },
    computed: {
    }
};
</script>

<style scoped lang='less'>
.header-select{
    display: flex;
    align-items: center;
    .icon{
        display: inline-block;
        width: 56px;
        height: 56px;
        text-align: center;
        color: #999;
        line-height: 56px;
    }
    .search-input{
        flex: 1;
        margin-left: 20px;
    }
    /deep/.van-search{
        background: #fff;
        .van-search__content{
        border-radius: 10px;
        width: 100%;
        height: 30px;
        background: #f5f5f5;
        color: #333;
        margin: 0 auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        .van-field__control{
            color: #333;
        }
        input::-webkit-input-placeholder {
            color: #999;
        }
        .van-icon-clear{
            color: #333;
        }
        .van-cell{
            color: #333;
        }
        }
    }
}
.list-item{
    background: white;
    border-radius: 3px;
    margin: 15px;
    padding: 25px 25px 10px;
    .item-text{
        .base-info{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            .name{
                font-size: 15px;
                color: #333333;
            }
            .user-group{
                font-size: 12px;
                color: #666666;
            }
        }
        .appovel-title{
            display: flex;
            margin-bottom: 10px;
            align-items: center;
            i{
                color: #075EBB;
                font-size: 18px;
            }
            span{
                margin-left: 8px;
                font-size: 12px;
                color: #999999;
            }
        }
        .appovel-time{
            i{
                color: #EC6C12;
            }
            .icon-shenpi{
                color: #9785F1;
            }
        }
    }
    .button-box{
        border-top: 1px solid #E5E5E5;
        padding-top: 10px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        div{
            padding: 5px 15px;
            font-size: 14px;
            border-radius: 3px;
            display: inline-block;
        }
        .pass-btn{
            border: 1px solid #075EBB;
            color: #075EBB;
        }
        .refuse-btn{
            margin-left: 15px;
            border: 1px solid #E63442;
            color: #E63442;
        }
    }
}
</style>
